<template>
	<view class="baseForm">
		<!-- 列表部分 -->
		<view style="height: 95vh; margin-top: 5px; overflow: auto">
			<view class="flex mt-8" style="min-height: 3vh">
				<u-button v-if = "!selectedData" type="primary" text="扫描" @click="scanButton" class="search-btn u-m-l-20"></u-button>
				<u-button v-if = "selectedData" type="primary" text="确定" @click="scanButton" class="search-btn u-m-l-20"></u-button>
			</view>
			<u-line></u-line>
			<view v-show="!tableList.length && tableLoading === false" class="flex justify-center font-16" style="margin: 0px 0 0px 0">
				<u-empty mode="list"></u-empty>
			</view>
			<u-loading-icon class="flex justify-center mt-20" textSize="18" v-show="tableLoading"></u-loading-icon>
			<view v-if="tableList.length" style="padding-bottom: 30px">
				<u-list ref="tableScroll" @scrolltolower="scrolltolower" class="list" v-if="total" :pagingEnabled="false" :scrollable="false" height="auto">
					<u-list-item v-for="(item, index) in tableList" :key="item.id" style="margin-bottom: 8px" >
						<view class="card" @click="selectButton(item)">
							<view class="flex record-title">
								<!-- 123|21|55445|60021|500|455200000065|01 -->
								<!-- 物料|批次|流水号|供应商|数量|POSA|POSA行号 -->
								<text class="">标签条码:{{ item.barCode || '' }}</text>
							</view>
							<view class="flex flex-col justify-between flex-1 h-full record-content-body" style="padding-bottom: 0px">
								<view class="record-content">
									<view class="record-item">
										<text>单号: {{ item.orderNo || '' }}</text>
										<text v-show="item.selected==true" style="color: chartreuse;">已选</text>
									</view>
								</view>
								<view class="record-content">
									<view class="record-item">
										<text>物料号: {{ item.materialCode || '' }}</text>
										<text>批次: {{ item.batch || '' }}</text>
									</view>
								</view>
								<view class="record-content">
									<view class="record-item">
										<text>最后更改时间: {{ item.lastUpdateTime || '' }}</text>
									</view>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
	<u-back-top :scroll-top="scrollTop" bottom="55" mode="squery"></u-back-top>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { ref, reactive, onMounted, toRaw } from 'vue';
import { onPageScroll, onLoad, onReachBottom, onShow } from '@dcloudio/uni-app';
import ScanBar from '@/components/scan-bar/index.vue';
import { http } from '@/utils/http';
import { CommonValue, PageResult } from '@/types/type';
import { useDictionaryStore } from '@/stores/useDictionaryStore';
//import { getMdmBininfosApi } from '@/api/common';
import { useWmsStore } from '@/stores/useWmsStore';

// 获取安全距离高度
const { safeAreaInsets } = uni.getSystemInfoSync();

// 监听页面到顶部距离
const scrollTop = ref(0);
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});

// 待完成数据
const current = ref(0);
const tableList = ref([]);
const tableLoading = ref(false);
const selectedData = ref(false);
const totalPage = ref(0);
const total = ref(0);

const scrolltolower = () => {
	totalPage.value > current.value && loadmore();
};
// 触底监听
onReachBottom(() => {
	scrolltolower();
});

onLoad(() => {
	//getBinList();
});

// 页面展示时刷新
onShow(() => {
	current.value = 0;
	tableList.value = [];
	loadmore();
});

// 请求列表
async function loadmore(type?: string) {
	try {
		tableLoading.value = true;
		current.value += 1;
		const result: PageResult<any> = await http({
			method: 'POST',
			url: '/wms/srmasn/queryByPage',
			data: {				
				current: current.value,
				size: 10,
				data: {orderType: "4",warehousingStatus: "1"}
			}
		});
		const list = result.data;
		totalPage.value = result.page;
		total.value = result.total;
		// for (let i = 0; i < list.length; i++) {
		// 	tableList.value.push({...tableList, id:list[i].id});
		// }
		for (let i = 0; i < list.length; i++) {
			list[i].selected = false;
			tableList.value.push(list[i]);
		}
		tableLoading.value = false;
		type === 'refresh' && uni.stopPullDownRefresh();
	} catch (e) {
		tableLoading.value = false;
		console.log(e);
	}
}

function selectButton(item) {
	selectedData.value = false;
	for(let i = 0; i < tableList.value.length; i++){
		if(tableList.value[i].id == item.id){
			tableList.value[i].selected = !item.selected;	
		}
		if(tableList.value[i].selected == true){
			selectedData.value = true;
		}
		console.log(selectedData.value);
	}
}


const selectList = ref([]);
async function scanButton(item) {
	selectList.value = [];
	for(let i = 0; i < tableList.value.length; i++){
		if(tableList.value[i].selected == true){
			tableList.value[i].storeId=tableList.value[i].id
			selectList.value.push(tableList.value[i]);
		}		
	}
	if(selectList.value != null &&  selectList.value.length>0){
		let dev = {"selectList":selectList.value};
		console.log("dev",dev)
		await useWmsStore().setDeviceList(dev);		
	}
	uni.navigateTo({
		url: `/pages/wms/finishedProductstore/takestore`
	});
}

</script>

<style lang="scss" scoped>
.baseForm {
	padding: $uni-page-padding;
	background-color: #fbfbff;
	height: 95vh;
	.u-form {
		:deep(.u-form-item__body) {
			padding: 5px 0;
		}
	}
	:deep(.uni-date__x-input) {
		padding-left: 2px;
		font-size: 13px;
	}
	:deep(.uni-date-x .icon-calendar) {
		font-size: 20px;
		padding-left: 8px;
	}
	.u-line {
		padding: 8px 0;
	}
	.submit_btn {
		position: fixed;
		bottom: 0;
		height: 42px;
		border-radius: 10px;
		margin: 10px 0px;
		width: calc(100% - 30px);
		font-size: 18px;
		:deep(.u-button__text) {
			font-size: 16px !important;
			font-weight: bold;
		}
	}
	.inputHeight {
		height: 20px;
	}
	.search-btn {
		height: 36px;
		border-radius: 6px;
	}
}

.card {
	background-color: #fff;
	border-radius: 8px;
	padding: 5px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
	border: 1px solid silver;

	.record-title {
		display: flex;
		justify-content: space-between;
		margin: 5px 0 3px 0;
		// color: $primary-color;
		color: #333 !important;
		word-break: break-all;

		uni-text:nth-child(1) {
			font-weight: bold;
			font-size: 16px;
		}

		uni-text:nth-child(2) {
			// font-weight: bold;
			font-size: 16px;
			min-width: 60px;
			text-align: right;
		}
	}
	.record-item {
		margin: 3px 0 !important;
		// color: #777 !important;
		// color: $primary-color;
		color: #333 !important;
		display: flex;
		align-items: center;
		font-size: 14px;

		> :first-child {
			min-width: 63px;
		}

		:deep(.u-tag__text--mini) {
			font-size: 13px;
			padding: 1px 3px 0;
		}
	}
}
:deep(.line1) {
	display: flex !important;
	span:nth-last-child(1) {
		display: inline-block !important;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
		word-break: break-word !important;
		overflow: hidden !important;
	}
}
:deep(.uicon-empty-list) {
	margin-top: 10px;
	font-size: 50px !important;
	line-height: 50px !important;
}
</style>
